<template>
	<view>
		<view class="head-logo u-flex">
			<image src="../../../static/img/logo/logo1.png" class="logo-img"></image>
		</view>
		<view class="wrap">
			<view class="u-text-center u-font-30 login-text">验证码登录/注册</view>
			<u-form  ref="uForm" >
				<u-form-item class="form-item" :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  :label-position="labelPosition" label="+86" prop="phone" label-width="150">
					<u-input :border="border" placeholder="请输入手机号" v-model="phone" type="number"></u-input>
					<u-button slot="right" type="success" hover-class="none" class="yzm-btn" size="mini" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
				<u-form-item  :label-position="labelPosition" label="验证码" prop="code" label-width="150">
					<u-input :border="border" placeholder="请输入验证码" v-model="code" type="text"></u-input>
				</u-form-item>
			</u-form>
			<view class="lijidenglu">
				<u-button shape="circle" class="ljdl-btn color5" @click="dologin()">立即登录</u-button>
			</view>
			<view class="mimadenglu u-text-center u-font-24 color5 u-padding-bottom-30" @click="gologinbypwd()">
				密码登录
			</view>
		</view>
		
	</view>
</template>

<script>
import { checkPhone, isEmpty,isEmptyObj } from '../../../utils';
import { mapState,mapMutations} from 'vuex';
export default {
	data() {
		let that = this;
		return {
			phone:"",
			code:'',
			password:"",
			invite_code:'',
			codeTips:'获取验证码',
			getCodeBtnColor:"#005500",
			getCodeisWaiting:false,
			border: false,
			check: false,
			labelPosition: 'left',
		};
	},
	computed: {
		...mapState('user',['token','userInfo']),
	},
	onLoad() {

	},
	methods: {
		...mapMutations('user',['setToken','setUserInfo']),
		Timer(){},
		getCode(){
			uni.hideKeyboard()
			if(this.getCodeisWaiting){
				return ;
			}
			if (!checkPhone(this.phone)) {
				this.$toast('请输入正确的手机号');
				return false;
			}
			
			const params ={
				phone: this.phone
			}
			console.log(params);
			this.$ajax.post('common/phonecode',params).then(data=>{
				this.setTimer();
			})
		},
		setTimer(){
			let holdTime = 60;
			this.codeTips = "重新获取(60)"
			this.Timer = setInterval(()=>{
				if(holdTime<=0){
					this.getCodeisWaiting = false;
					//this.getCodeBtnColor = "#005500";
					this.codeTips = "获取验证码"
					clearInterval(this.Timer);
					return ;
				}
				this.codeTips = "重新获取("+holdTime+")"
				this.getCodeisWaiting = true;
				holdTime--;
			},1000)
		},
		dologin(){
			if (!checkPhone(this.phone)) {
				this.$toast('请输入正确的手机号');
				return false;
			}
			if(this.code.length!=6){
				this.$toast('请输入验证码');
				return false;
			}
			const params ={
				username: this.phone,
				code:this.code
			}
			this.$ajax.post('common/loginbycode',params).then(data=>{
				this.$api.msg(data.msg);
				this.setToken(data.data.token);
				if(data.data.userinfo){
					this.setUserInfo(data.data.userinfo);
				}
				setTimeout(function(){
					return uni.switchTab({
						url:'/pages/user/user'
					})
				},300)
				
				
			})
		},
		gologinbypwd(){
			return uni.navigateTo({
				url:'/pages/user/login/password'
			})
		}
	}
};
</script>

<style scoped lang="scss">
	page{
	background-color: #ececec;	
	}
.wrap {
	padding:30rpx 110rpx;
	background-color: #FFFFFF;
}
.head-logo{
	height: 360rpx;
	background-color: #ececec;
	padding: 0 45rpx;
	.logo-img{
		width: 100%;
		height: 76rpx;
	}
}
.login-text{
	color: #515151;
	margin-top: 55rpx;
}
.yzm-btn{
	color: #515151;
	background-color: #FFFFFF;
}
.form-item{
	margin: 20rpx 0 50rpx;
}
.lijidenglu{
	margin-top: 85rpx;
	margin-bottom: 85rpx;
	.ljdl-btn{
		font-size: 30rpx;
		margin: 0 45rpx;
	}
	.ljdl-btn:after{
		border:1px solid #dfdfdf;
	}
}

</style>
